<template>
	<LogLoginSearch></LogLoginSearch>
	<Table border :columns="columns" :data="data">
		
		<template #status="{ row, index }">
        <DotTag type="primary" v-if="row.state">登录成功</DotTag>
        <DotTag type="error" v-else>登录失败</DotTag>
      </template>

		<template #footer>
			<div style="min-width: 300px; max-width: 380px;">
				<van-pagination v-model="page" :total-items="total" 
						:items-per-page="pageSize" 
						:show-page-size="5" force-ellipses />
			</div>
		</template>
	</Table>
</template>

<script>

import VanPagination from '../components/VanPagination.vue'
import LogLoginSearch from '../components/log/LogLoginSearch.vue'
import DotTag from '../components/DotTag.vue'

export default {
	data () {
		return {
			page: 1, 
			total: 110,
			pageSize: 10, 
			columns: [
				 {
					type: 'selection',
					width: 60,
					align: 'center'
				},
				{
					title: '登录人员',
					key: 'username'
				},
				{
					title: '登录时间',
					key: 'loginTime'
				},
				{
					title: '操作系统',
					key: 'osName'
				},
				{
					title: '浏览器',
					key: 'browserName'
				},
				{
					title: '登录状态',
					slot: 'status'
				},
				{
					title: '原因',
					key: 'reason',
					width: 240,
				},
				{
					title: 'IP地址',
					key: 'ip'
				},
				{
					title: '登录地点',
					key: 'address'
				},
			],
			data: [
				{
					username: 'admin',
					loginTime: '2023-04-09 11:12:33',
					state: true, 
					ip: '10.11.23.56',
					address: '浙江杭州',
					osName: "Window 10",
					browserName: "Chrome",
					reason: "" ,
				},
				{
					username: 'admin',
					loginTime: '2023-04-08 10:56:12',
					state: false, 
					ip: '10.11.23.56',
					address: '浙江杭州',
					osName: "Window 10",
					browserName: "Chrome",
					reason: "" ,
				}
			],
			
		}
	},
	components: {
		VanPagination,
		LogLoginSearch,
		DotTag ,
	}
	
}
</script>

<style>
</style>